<template>
    <div style="overflow: hidden">
        <Row :gutter="16">
            <Col span="16">
            <div ref="map_pic" class="map_pic_div">
                <img ref="imgbg" src="http://aliyuncdn.kmjiu.com/images/nong-yun/mappic.png" alt=""
                     style="width: 100%;height: 100%">

                <Tooltip class="point1" content="基本传感器" placement="top">
                    <!--<div :style="{width:'60px',height:'70px',background:(pointerBgColors[0]?choseBgColor:noChoseBgColor)}"-->
                    <!--@click="pointer(0)"></div>-->
                    <img :src=isChoseBtn[0]?choseGreen:normalGreen class="img_class1"
                         @click="pointer(0)"/>

                </Tooltip>

                <Tooltip class="point2" content="有线节点1" placement="top">
                    <!--<div class="pointSize" :style="{background:pointerBgColors[1]?choseBgColor:noChoseBgColor}"-->
                    <!--@click="pointer(1)"></div>-->
                    <img :src=isChoseBtn[1]?choseRed:normalRed class="pointSize"
                         @click="pointer(1)"/>
                </Tooltip>

                <Tooltip class="point3" content="有线节点2" placement="top">
                    <!--<div class="pointSize" :style="{background:pointerBgColors[2]?choseBgColor:noChoseBgColor}"-->
                    <!--@click="pointer(2)"></div>-->
                    <!---->
                    <img class="pointSize" :src=isChoseBtn[2]?choseRed:normalRed @click="pointer(2)"/>

                </Tooltip>

                <Tooltip class="point4" content="无线节点1" placement="top">
                    <!--<div class="pointSize" :style="{background:pointerBgColors[3]?choseBgColor:noChoseBgColor}"-->
                    <!--@click="pointer(3)"></div>-->
                    <img class="pointSize" :src=isChoseBtn[3]?choseRed:normalRed @click="pointer(3)"/>
                </Tooltip>

                <Tooltip class="point5" content="无线节点2" placement="top">
                    <!--<div class="pointSize" :style="{background:pointerBgColors[4]?choseBgColor:noChoseBgColor}"-->
                    <!--@click="pointer(4)"></div>-->
                    <img class="pointSize" :src=isChoseBtn[4]?choseRed:normalRed @click="pointer(4)"/>
                </Tooltip>
            </div>
            </Col>

            <Col ref='right_data' span="8" style="height:5.5rem;overflow-y: auto;padding: 0 10px;width: 30%">
            <Card v-for="(item,index) in cardData" :key="index" style="margin-bottom: 10px">
                <Row slot="title" type="flex" align="middle">
                    <Col span="10">
                    <Icon :type=item.titleIcon size="25"></Icon>
                    <span style="margin-left: 5px; margin-right: 10px">{{item.title}}</span>
                    </Col>
                    <Col span="14">
                    <div align="right">
                        <Button type="info" @click="actualTime">实时</Button>
                        <!--<Button type="success">历史</Button>-->
                        <!--<Button type="warning">设置</Button>-->
                    </div>
                    </Col>
                </Row>
                <Row type="flex" align="middle" class="height-100">
                    <div class="infor-card-count user-created-count">
                        <p :style="{fontSize:'70px',color:item.valueColor}">{{item.value}}</p>
                    </div>
                </Row>
                <!--<Row type="flex" align="middle" class="height-100">-->
                <!--<Icon type="record" color="#229922" size="20"></Icon>-->
                <!--<span style="margin-left: 5px; margin-right: 10px">适宜</span>-->
                <!--<Icon type="record " color="#aa5500" size="20"></Icon>-->
                <!--<span style="margin-left: 5px; margin-right: 10px">警告</span>-->
                <!--<Icon type="record" color="red" size="20"></Icon>-->
                <!--<span style="margin-left: 5px; margin-right: 10px">不适宜</span>-->
                <!--</Row>-->
            </Card>
            </Col>
        </Row>
    </div>
</template>
<style>
    .point1 {
        width: 80px;
        height: 80px;
        position: absolute;
        display: inline;
        top: 2%;
        left: 68%;
        cursor: pointer;
        /*background-color: rgba(0,0,0,0.5);*/
    }

    .point2 {
        width: 35px;
        height: 40px;
        position: absolute;
        display: inline;
        top: 30%;
        left: 66%;
        cursor: pointer;
    }

    .point3 {
        width: 35px;
        height: 40px;
        position: absolute;
        display: inline;
        top: 35%;
        left: 71%;
        cursor: pointer;

    }

    .point4 {
        width: 35px;
        height: 40px;
        position: absolute;
        display: inline;
        top: 46%;
        right: 8%;
        cursor: pointer;
        /* left: 830px; */
    }

    .point5 {
        width: 35px;
        height: 40px;
        position: absolute;
        display: inline;
        top: 62%;
        cursor: pointer;
        left: 66%;
    }

    .pointSize {
        width: 35px;
        cursor: pointer;
        height: 40px;
    }

    .map_pic_div {
        width: 100%;
        /*height: 100%;*/
        background-repeat: no-repeat;
        /*background-image: url("https://i.loli.net/2017/11/12/5a07b8b724374.png");*/
        /*https://i.loli.net/2017/11/12/5a07b45f36a76.png*/
        background-size: 100% 100%;
    }

    .img_class1 {
        width: 45px;
        height: 60px;
        position: absolute;
        top: 0;
        left: 0;
    }

    .img_class2 {
        width: 45px;
        height: 60px;
        position: absolute;
        top: 0;
        left: 0;
    }

    .height-100 {
        height: 500px;
    }

    .dataCol {
        width: 300px;
    }


</style>
<script>
    import {getStationData} from '../../api'
    import Cookies from 'js-cookie';

    export default {
        data() {
            return {
                msg: 'hello vue',
                currentType: 0,
                normalRed: 'http://aliyuncdn.kmjiu.com/images/nong-yun/矩形639拷贝.png',
                choseRed: 'http://aliyuncdn.kmjiu.com/images/nong-yun/点击1.png',
                normalGreen: 'http://aliyuncdn.kmjiu.com/images/nong-yun/矩形639.png',
                choseGreen: 'http://aliyuncdn.kmjiu.com/images/nong-yun/点击绿.png',
                cardData: [
//                    {
//                        titleIcon: 'thermometer',
//                        title: '主机温度 /℃',
//                        valueColor: '#208b1a',
//                        value: '23.5',
//                    },
//                    {
//                        titleIcon: 'thermometer',
//                        title: '电池 mv',
//                        valueColor: '#fb0008',
//                        value: '6771',
//                    },
//                    {
//                        titleIcon: 'thermometer',
//                        title: '降水量 mm',
//                        valueColor: '#208b1a',
//                        value: '0',
//                    },
//                    {
//                        titleIcon: 'thermometer',
//                        title: '大气压力 mBar',
//                        valueColor: '#208b1a',
//                        value: '887',
//                    }
                ],//右侧节点数据
                tempCardData: [
                    //基本传感器
                    [
                        {
                            titleIcon: 'thermometer',
                            title: '主机温度 /℃',
                            valueColor: '#208b1a',
                            value: '23.5',
                        },
                        {
                            titleIcon: 'thermometer',
                            title: '电池 mv',
                            valueColor: '#fb0008',
                            value: '6771',
                        },
                        {
                            titleIcon: 'thermometer',
                            title: '降水量 mm',
                            valueColor: '#208b1a',
                            value: '0',
                        },
                        {
                            titleIcon: 'thermometer',
                            title: '大气压力 mBar',
                            valueColor: '#208b1a',
                            value: '887',
                        }
                    ],
                    //有线节点1
                    [
                        {
                            titleIcon: 'thermometer',
                            title: 'Caipos空气温度 /℃',
                            valueColor: '#984203',
                            value: '11.5',
                        },
                        {
                            titleIcon: 'thermometer',
                            title: '相对湿度 ／%',
                            valueColor: '#fb0008',
                            value: '39.9',
                        },
                        {
                            titleIcon: 'thermometer',
                            title: '有效光合作用／uMol/m2*s',
                            valueColor: '#fb0008',
                            value: '0',
                        },
                        {
                            titleIcon: 'thermometer',
                            title: '土壤温度 ／℃',
                            valueColor: '#fb0008',
                            value: '39.9',
                        },
                    ],
                    //有线节点2
                    [
                        {
                            titleIcon: 'thermometer',
                            title: '风速 / m/s',
                            valueColor: '#f00',
                            value: '0.3',
                        },
                        {
                            titleIcon: 'thermometer',
                            title: '风向 / deg',
                            valueColor: '#208b1a',
                            value: '186',
                        },
                        {
                            titleIcon: 'thermometer',
                            title: '紫外线指数 / ind',
                            valueColor: '#f00',
                            value: '2.74',
                        },
                        {
                            titleIcon: 'thermometer',
                            title: '太阳辐射 ／ W/m2',
                            valueColor: '#208b1a',
                            value: '229',
                        },
                        {
                            titleIcon: 'thermometer',
                            title: 'SDI12 / mv',
                            valueColor: '#208b1a',
                            value: '3006',
                        },
                    ],
                    //无线节点1
                    [
                        {
                            titleIcon: 'thermometer',
                            title: 'WSN电池 / mv',
                            valueColor: '#f00',
                            value: '201',
                        },
                        {
                            titleIcon: 'thermometer',
                            title: '土壤水分50cm / %',
                            valueColor: '#208b1a',
                            value: '15.9',
                        },
                        {
                            titleIcon: 'thermometer',
                            title: '土壤水分20cm / %',
                            valueColor: '#f00',
                            value: '11.3',
                        },
                        {
                            titleIcon: 'thermometer',
                            title: '土壤温度20cm / %',
                            valueColor: '#208b1a',
                            value: '35.1',
                        },
                        {
                            titleIcon: 'thermometer',
                            title: '叶面湿度／ ind',
                            valueColor: '#208b1a',
                            value: '0.9',
                        }
                    ],
                    //无线节点2
                    [
                        {
                            titleIcon: 'thermometer',
                            title: 'WSN电池 / mv',
                            valueColor: '#f00',
                            value: '2881',
                        },
                        {
                            titleIcon: 'thermometer',
                            title: '土壤水分50cm / %',
                            valueColor: '#208b1a',
                            value: '11.9',
                        },
                        {
                            titleIcon: 'thermometer',
                            title: '土壤水分20cm / %',
                            valueColor: '#f00',
                            value: '19.3',
                        },
                        {
                            titleIcon: 'thermometer',
                            title: '土壤温度20cm / %',
                            valueColor: '#208b1a',
                            value: '5.1',
                        },
                        {
                            titleIcon: 'thermometer',
                            title: '叶面湿度／ ind',
                            valueColor: '#208b1a',
                            value: '0',
                        },
                    ],
                ],
                isChoseBtn: [true, false, false, false, false],//是否显示背景
                noChoseBgColor: 'rgba(0,0,0,0)',//选中后的背景
                choseBgColor: 'rgba(0,0,0,0.6)',//选中后的背景
                snodesList: [],
                data: [],
                currentSnode: 0,
                allData: [],//所有数据
                snodes: [0, 1, 19, 129, 130]
            }
        },
        methods: {
            rgbA: function () {
                return rgba(0, 0, 0, 0.6)
            },
            pointer: function (type) {
                for (var i = 0; i < this.isChoseBtn.length; i++) {
                    this.isChoseBtn[i] = false;
                }
                this.$set(this.isChoseBtn, type, true)
                this.currentType = type;
                this.getData(this.snodes[type])
//                this.cardData = this.tempCardData[type];
            },
            //实时
            actualTime: function () {
                //todo 跳转
                this.$router.push({
                    path: "/data_manage/env_data_manage",
                    query: {
                        type: this.currentType,
                    }
                })
            },
            //
            getData: function (snode) {
                let params = {
                    snode: snode,
                    access_token: Cookies.get("access_token")
                }
                getStationData(params)
                    .then(res => {
                        var _this = this;
                        var snodesList = res.snodesList;
                        var snodeDatas = res.data[snode];

                        var currentSnodeList;
                        snodesList.forEach((item, index) => {
                            if (item.snode == params.snode) {
                                currentSnodeList = item;
                            }
                        })
                        this.cardData = [];
                        currentSnodeList.children.forEach((item, index) => {
                            if (item.title != '时间') {
                                if (snodeDatas[0][item.key] != null && snodeDatas[0][item.key] != "") {
                                    var data = {
                                        titleIcon: 'thermometer',
                                        title: item.title,
                                        valueColor: '#208b1a',
                                        value: snodeDatas[0][item.key],
                                    }
                                    _this.cardData.push(data)
                                }
                            }
                        })
                    })
            }
        },
        created() {
            this.getData(0)

        }
    }
</script>